<!-- 现场人员变化 -->
<template>
  <div>
    <v-echarts :options="options" autoresize :class="$style.echartStyle"/>
  </div>
</template>

<script>
  import ECharts from 'vue-echarts'
  import 'echarts/lib/chart/line'
  import 'echarts/lib/component/tooltip'
  export default {
    components: { 'v-echarts': ECharts },
    data () {
      return {}
    },

    computed: {
      options () {
        let color = ['#0263FF', '#53FCC0', '#DEEC00', '#8E30FF', '#F35C6E', '#F5A135', '#DBEC00', '#4FFCAD']
        return {tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          // legend: {
          //   data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
          //   textStyle: {
          //     color: '#fff'
          //   },
          //   padding: [
          //     20,  // 上
          //     10, // 右
          //     5,  // 下
          //     50, // 左
          //   ],
          // },
          // toolbox: {
          //   feature: {
          //     saveAsImage: {}
          //   }
          // },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                color: '#C8C5DD'
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#C8C5DD'
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: '#C8C5DD'
                }
              },
              data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '搜索引擎',
              type: 'line',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'top'
                }
              },
              areaStyle: {},
              data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
          ]
        }
      }
    },

    methods: {},
    created () {},
    beforeDestroy () {
      clearInterval(this.timer0)
    }
  }

</script>
<style lang='scss' module>
  .echartStyle{
    width: 100%;
    height: 250px;
    margin: 0 auto;
  }
</style>
